<!--  设备管理 list  -->
<template>
	<div>
		<el-card shadow="hover">
			<el-form :inline="true" :model="data.queryParams">
				<el-form-item label="设备编号">
					<el-input size="default" v-model="data.queryParams.deviceCode" placeholder="设备编号" clearable style="width: 150px" />
				</el-form-item>

				<el-form-item label="设备型号">
					<el-select
						size="default"
						v-model.number="data.queryParams.deviceModel"
						clearable
						reserve-keyword
						placeholder="设备型号"
						style="width: 100px"
						@change="fetch"
					>
						<el-option v-for="item in deviceModelOptions" :key="item.label" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>

				<el-form-item label="平台">
					<el-select
						size="default"
						v-model="data.queryParams.platformId"
						clearable
						reserve-keyword
						placeholder="平台"
						@change="fetch"
						style="width: 100px"
					>
						<el-option v-for="item in platform" :key="item.orgId" :label="item.orgName" :value="item.orgId" />
					</el-select>
				</el-form-item>

				<el-form-item label="设备状态">
					<el-select
						size="default"
						v-model="data.queryParams.online"
						clearable
						reserve-keyword
						placeholder="设备状态"
						@change="onlineStatusChange"
						style="width: 100px"
					>
						<el-option v-for="item in radioOnline" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>

				<el-form-item label="备注">
					<el-select
						size="default"
						v-model="data.queryParams.remark"
						clearable
						reserve-keyword
						placeholder="设备备注"
						@change="remarkChange"
						style="width: 100px"
					>
						<el-option v-for="item in remarkList" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>

				<el-form-item label="">
					<el-button size="default" type="primary" @click="search"> 查询</el-button>
				</el-form-item>
				<el-form-item label="" style="float: right; margin-right: 0">
					<el-button size="default" type="success" @click="fetch">刷新</el-button>
					<el-button size="default" type="primary" @click="addDevice">新增</el-button>
				</el-form-item>
			</el-form>

			<!-- list -->
			<el-table ref="table" :data="data.tableData.list" :border="true" size="default" highlight-current-row :fit="true" height="calc(100vh - 310px)">
				<el-table-column align="center" label="#" type="index" width="50px" :reserve-selection="true" />
				<el-table-column label="设备编号" align="left" prop="deviceCode"  width="250px">
					<template #default="{ row }">
						<div class="flex">
							<span>{{ row.deviceCode }}</span>
							<span class="length">{{ row.deviceCode.length }}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="设备型号" align="left" prop="deviceModel"></el-table-column>
				<el-table-column label="设备型号" align="left" prop="deviceType"></el-table-column>
				<!--				<el-table-column label="平台" align="left" prop="platformId" ></el-table-column>-->
				<el-table-column label="平台Name" align="left" prop="platformName"></el-table-column>
				<el-table-column label="备注" align="left" prop="remark"></el-table-column>
				<el-table-column label="操作" column-key="operation" fixed="right">
					<template #default="{ row }">
						<el-button @click="edit(row)" type="primary" text bg v-auth="'device:update'"> 编辑</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页 -->
			<pagination
				v-show="data.tableData.total > 0"
				:total="data.tableData.total"
				v-model:page="data.queryParams.pageNum"
				v-model:limit="data.queryParams.pageSize"
				@pagination="fetch"
			/>
		</el-card>

		<!--  编辑  -->
		<device-edit
			v-if="data.dialog.isVisible"
			:dialog-visible="data.dialog.isVisible"
			:rowData="data.curRow"
			@close="editClose"
			@success="editSuccess"
		/>

		<!--  新增  --> 
		<device-add
			v-if="data.addVisible"
			:dialog-visible="data.addVisible"
			@close="addClose"
			@success="addSuccess"
		/>
	</div>
</template>

<script lang="ts" setup name="DeviceList">
import { reactive, onMounted, ref, watch, onUpdated } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useSmoke } from '/@/hook/index';
import deviceApi from '/@/api/smoke/device';
import DeviceEdit from './components/Edit.vue';
import DeviceAdd from './components/Add.vue';
import { smokeStore } from '/@/stores/smoke';
import { useUserInfo } from '/@/stores/userInfo';
import { storeToRefs } from 'pinia';

const stores = useUserInfo();
const { userInfos, roleIds } = storeToRefs(stores);

// import { useStore as userStore } from "/@/modules/base/store/index";
const { getAddress, isOffline } = useSmoke();
const btnColumn = ref();

const platform = [
	{
		orgId: 0,
		orgName: '全部',
	},
	{
		orgId: 2,
		orgName: '开发平台',
	},
	{
		orgId: 6,
		orgName: '测试平台',
	},
	{
		orgId: 3,
		orgName: '工作平台',
	},
];

// 设备状态
const deviceModelOptions = [
	{
		value: '',
		label: '全部',
	},
	{
		value: 'M1',
		label: 'M1',
	},
	{
		value: 'M3',
		label: 'M3',
	},
	{
		value: 'M4',
		label: 'M4',
	},
];

const radioOnline = [
	{ value: '', label: '全部' },
	{ value: '1', label: '刚来过' },
	{ value: '2', label: '已离开' },
];

const remarkList = [
	{ value: '', label: '全部' },
	{ value: '1', label: '有备注' },
	{ value: '2', label: '无备注' },
];

const data = reactive({
	queryParams: {
		platformId: 0,
		deviceModel: '',
		online: '',
		deviceCode: '',
		remark:"",
		pageNum: 1,
		pageSize: 10,
	},

	mapStatusData: [],

	//编辑弹窗
	dialog: {
		isVisible: false,
	},

	// 新增
	addVisible: false,

	selection: [],
	loading: false,
	tableData: {
		list: <any>[],
		total: 0,
	},
	curRow: <any>{},
});

onMounted(() => {
	fetch();
});

// 设备在线状态查询
function onlineStatusChange(value: any) {
	if (!value) {
		data.queryParams.online = '';
	}
	fetch();
}

// 设备在线状态查询
function remarkChange(value: any) {
	if (!value) {
		data.queryParams.remark = '';
	}
	fetch();
}

// 新增
function addDevice() {
	data.addVisible = true;
}

function addClose() {
	data.addVisible = false;
}

function addSuccess() {
	addClose()
	fetch();
}

// 编辑
function edit(row: any) {
	data.curRow = row;
	data.dialog.isVisible = true;
}

//编辑弹窗关闭
function editClose() {
	data.dialog.isVisible = false;
}

function editSuccess() {
	editClose();
	fetch();
}

//搜索
function search() {
	data.queryParams.pageNum = 1;
	fetch();
}

// 删除
function singleDelete(row: any) {
	let params = {
		id: row.id,
		deviceCode: row.deviceCode,
	};

	ElMessageBox.confirm('此操作将永久删除该设备, 是否继续?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			deviceApi.delete(params).then((res) => {
				ElMessage.success('删除成功');
				fetch();
			});
		})
		.catch(() => {
			ElMessage.info('已取消操作');
		});
}

// 获取列表页数据
function fetch() {
	data.loading = true;

	deviceApi
		.getDeviceList(data.queryParams)
		.then((res) => {
			data.tableData.list = res.data.list.forEach((item: any) => {
				item.offLine = isOffline(item.lastUploadTime);
			});
			data.tableData = res.data;
			data.loading = false;
		})
		.finally(() => (data.loading = false));
}
</script>
<style lang="scss" scoped>
.flex {
	display: flex;
	justify-content: space-between;

	.length {
		color: #cdd0d6;
	}
}

.address {
	line-height: 32px;
}
</style>
